<template>
    <div>
        <!-- 头部导航 -->
        <div class="header">
            <van-nav-bar title="完善资料" left-arrow @click-left="toBack" />
        </div>
        <!-- 头部导航 -->
        <div class="centent">
            <div class="line height">
                <van-field readonly clickable name="datetimePicker" :value="value" label="生日" placeholder="点击选择生日"
                    @click="showPicker = true" />
            </div>
            <!-- 电话 -->
            <div class="line">
                <van-field v-model="user.userTel" maxlength="18" label="电话" placeholder="输入本人有效电话" />
            </div>
        </div>


        <!-- 绑定成功 -->
        <div v-if="suss" class="suss">
            <div class="suss-title">提交成功</div>
            <img class="suss-img" src="../../assets/user/right.png" alt="">
            <div class="suss-status">恭喜,提交成功!</div>
        </div>
        <!-- /绑定成功 -->


        <!-- 按钮 -->
        <div class="footer tool">
            <van-button @click="sussChange" class="res-suss ">{{ suss ? '确定' : '提交' }}</van-button>
        </div>

        <van-popup v-model="showPicker" position="bottom">
            <van-datetime-picker type="month-day" v-model="currentDate" @confirm="onConfirm" title="选择生日"
                @cancel="showPicker = false" />
        </van-popup>

    </div>

</template>

<script>

import { editUser } from '../../network/user'

export default {
    name: 'HomeR',
    data() {
        return {
            isShow: false,
            blue: false,
            red: false,
            showPicker: false,
            value: '',
            show: false, //弹窗
            suss: false, //绑定成功状态
            user: JSON.parse(localStorage.user),
            dateV: '',
            minDate: new Date(1500, 1, 1),
            maxDate: new Date(),
            currentDate: new Date(),


        }
    },
    mounted() {

    },
    methods: {
        formatter(date) {
            var year = date.getFullYear()
            var month = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)
            var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
            this.dateV = month + '-' + day
            console.log(year + '-' + month + '-' + day)
            return month + '-' + day
        },
        onConfirm(date) {
            console.log(date)
            this.value = this.formatter(date);
            this.showPicker = false;
        },
        sussChange: function () {
            if (!this.suss) {
                if (this.value == null || this.value == '') {
                    this.$toast({
                        message: "请选择生日",
                        position: "bottom"
                    });
                    return false;
                }
                if (this.user.userTel == null || this.user.userTel == '') {
                    this.$toast({
                        message: "请输入电话",
                        position: "bottom"
                    });
                    return false;
                }
                if (!this.validator(this.user.userTel)) {
                    this.$toast({
                        message: "输入的手机号格式有误",
                        position: "bottom"
                    });
                    return false;
                }
                let fd = new FormData();
                fd.append("userTel", this.user.userTel);
                fd.append("userId", localStorage.userId);



                editUser(fd).then(res => {
                    if (res.flag) {
                        if (res.data.flag == 'error') {
                            this.$toast(res.data.msg)
                        } else {
                            localStorage.user = JSON.stringify(res.data.user)
                            this.$toast('保存成功')
                            this.$router.go(-1)
                        }
                    }
                })
            } else {
                this.$router.go(-1)
            }
        },
        validator: function (val) {
            return /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/.test(val) || /^(?:(?:\d{3}-)?\d{8}|^(?:\d{4}-)?\d{7,8})(?:-\d+)?$/.test(val);
        },
        toBack() {
            this.$router.go(-1)
        },
    },
    created() {
    },
    //计算属性
    computed: {

    },
    filters: {

    }

}

</script>

<style lang='less' scoped>
.header .van-icon {
    color: #333;
    font-size: 40px;
    font-weight: bold;
}

.header .van-nav-bar__text {
    color: #333;
}

.header {
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 88px;
    background-color: #fff;
    padding-top: 60px;
}

.centent {
    position: relative;
    padding: 24px 32px;
    top: 148px;
}

.line {
    border-bottom: 2px #f2f2f2 solid;
    display: flex;
}

.height {
    height: 88px;
    display: flex;
    align-items: center;
}



.suss {
    position: fixed;
    padding-top: 80px;
    width: 100%;
    height: 100%;
    z-index: 88;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
}

.van-picker__toolbar {
    height: 92px;
}

.suss-title {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 92px;
    width: 100%;
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 144px;
    color: #343434;
}

.suss-img {
    position: relative;
    margin: 0 auto;
    display: flex;
    width: 176px;
    height: 176px;
    margin-bottom: 32px;
}

.suss-status {
    width: 100%;
    text-align: center;
    font-size: 32px;
    margin-bottom: 48px;
}

.suss-text {
    width: 100%;
    text-align: center;
    font-size: 28px;
}


.footer {
    position: fixed;
    width: 100%;
    bottom: 24px;
    font-size: 28px;
    display: flex;
    justify-content: center;
}

.footer>.van-button {
    position: absolute !important;
    bottom: 132px !important;
    width: 652px !important;
    color: #FF3C14;
    border-radius: 44px !important;
    border: none;

}


.res-suss {
    background-color: #FF3B13;
    color: #fff !important;
}

.myInfoBox {
    box-sizing: border-box;
    width: 100%;
    padding: 160px 0 80px;
    text-align: center;
    font-size: 36px;
    color: #333;
    font-weight: bold;
}

/deep/.van-nav-bar__text,
/deep/.van-nav-bar__left,
/deep/.van-nav-bar .van-icon {
    color: #333;
}
</style>